<template>
  <view class="exchange-list">
    <my-header title="选择要拒提的商品"></my-header>
    <my-content class="content" :default-padding-top="10">
      <view class="take_box">
        <view
          class="goods_box"
          :style="[useLevelBg('item', item.level_id)]"
          @click="selected(item, index)"
          v-for="(item, index) in orderData"
          :key="item.id"
        >
          <view class="goods_content">
            <image
              mode="widthFix"
              v-if="item.selected"
              class="selected"
              src="https://www.dingxians.cn/images/common/selected.png"
            ></image>
            <image mode="widthFix" v-else class="selected" src="https://www.dingxians.cn/images/common/unselected.png"></image>
            <view
              class="goods-image-bg"
              :style="[useLevelBg('img', item.level_id)]"
            >
              <image mode="widthFix" class="goods_image" :src="item.blind_box_prize_image"></image>
              <view
                class="level-icon"
                :style="[useLevelBg('icon', item.level_id)]"
              >
                {{ item.level_name }}
              </view>
            </view>
            <view class="goods_info">
              <view class="goods_name">{{ item.blind_box_prize_name }}</view>
              <view class="goods_price_box">
                <view>￥</view>
                <view class="goods_price_int">{{ item.price }}</view>
                <view class="goods_price_ext">参考价</view>
              </view>
              <view class="goods_recovery">
                <view class="goods_price">
                  <view style="font-size: 28rpx">拒提价：</view>
                  <view>{{ item.recovery_price }}</view>
                  <image class="gold" mode="widthFix" src="https://www.dingxians.cn/images/shop/money.png"></image>
                </view>
                <view class="goods_num">
                  <my-number-box class="number-box" :show="item.num > 1" v-model="item.num" :max="item.num" :min="1"></my-number-box>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="visibility: hidden">1</view>

      <view class="bottom">
        <view class="bottom_select" @click="allQuery()">
          <image class="bottom_select_icon" src="https://www.dingxians.cn/images/common/unselected.png" v-if="!allSelected"></image>
          <image class="bottom_select_icon" src="https://www.dingxians.cn/images/common/selected.png" v-if="allSelected"></image>
          <view style="font-size: 24rpx">全选</view>
          <view class="bottom_box">
            <view class="bottom_text">
              <view>已选</view>
              <view class="bottom_text_num">{{ num }}</view>
              <view class="bottom_txt">件</view>
            </view>
            <view class="bottom_title">
              <view>可拒提：</view>
              <view class="total_recovery_price">
                {{ total_recovery_price }}
              </view>
              <image mode="widthFix" class="gold" src="https://www.dingxians.cn/images/shop/money.png"></image>
            </view>
          </view>
        </view>

        <view class="exchange_btn" v-if="num == 0 || exchangeStatus">立即拒提</view>
        <view class="exchange_btn exchange" v-if="num > 0 && !exchangeStatus" @click="exchange()">立即拒提</view>
      </view>
    </my-content>
    <my-alert-dialog ref="alertDialog" title="提示" content="确定要拒提嘛？" @confirm="onConfirm"></my-alert-dialog>
  </view>
</template>

<script>
import api from '../../api/index.js'
import box from '@/mixins/box'

export default {
  mixins: [box],
  data() {
    return {
      orderData: [],
      id: '',
      allSelected: false,
      page: 1,
      lastPage: 1,
      exchangeStatus: false,
      isWelfare: false,
    }
  },
  onLoad(option) {
    this.id = option.id
    this.isWelfare = option.welfare === 'true'
    this.getGoods(1)
  },
  onShow() {
    this.exchangeStatus = false
  },

  onReachBottom() {
    if (this.page > this.lastPage) {
      this.show('已经到底了')
      return
    }
    this.getGoods(1)
  },

  computed: {
    // 选中的商品
    num() {
      let total_num = 0
      this.orderData
        .filter((item) => {
          return item.selected == true
        })
        .forEach((item) => {
          total_num += item.num
        })
      return total_num
    },
    total_recovery_price() {
      var total = 0
      this.orderData
        .filter((item) => {
          return item.selected == true
        })
        .forEach((item) => {
          total += item.recovery_price * item.num
        })
      return total.toFixed(2)
    },
    selected_id() {
      return this.orderData
        .filter((item) => {
          return item.selected === true
        })
        .map((item) => {
          return item.id +  ':' + item.num
        }).join(',')
    },
    selected_id2() {
      return this.orderData
        .filter((item) => {
          return item.selected === true
        })
        .map((item) => {
          return item.id
        })
    },
  },
  methods: {
    refresh() {
      this.page = 1
      this.getGoods(2)
    },
    onConfirm() {
      this.exchangeStatus = true
      uni.showLoading({
        title: '拒提中~',
      })
      let promise
      if (this.isWelfare) {
        promise = api.welfareHouses.exchange({ id: this.selected_id2 })
      } else {
        promise = api.blindBoxOrderPrizes.exchange({ params: this.selected_id })
      }
      promise
        .then((res) => {
          uni.hideLoading()
          this.exchangeStatus = false
          this.allSelected = !this.allSelected
          if (res.code === 200) {
            this.show('拒提成功')
            setTimeout(() => {
              // this.refresh()
              uni.navigateBack()
            }, 500)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    exchange() {
      if (this.selected_id.length === 0) {
        this.show('请选中要拒提的商品')
        return
      }

      this.$refs.alertDialog.show()
    },

    splitNum(num) {
      // if (typeof(num) == 'number') {
      return num.toString().split('.')
      // }
      // return num.split('.')
    },
    allQuery() {
      this.allSelected = !this.allSelected
      for (let i = 0; i < this.orderData.length; i++) {
        this.orderData[i].selected = this.allSelected
        this.$set(this.orderData, i, this.orderData[i])
      }
    },
    selected(item, index) {
      item.selected = !item.selected
      this.$set(this.orderData, index, item)
    },
    getGoods(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      let promise
      if (this.isWelfare) {
        promise = api.welfareHouses.exchangeShow({ page: this.page })
      } else {
        promise = api.blindBoxOrderPrizes.exchangeShow({ page: this.page })
      }
      promise.then((res) => {
        if (res.code === 200) {
          uni.hideLoading()
          if (type === 1) {
            this.orderData = this.orderData.concat(res.data.data)
          } else if (type === 2) {
            this.orderData = res.data.data
          }
          // console.log(this.orderData)
          this.lastPage = res.data.lastPage
          this.page++
        }
      })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss">
.exchange-list {
  min-height: 100vh;
  height: 100%;
  // background-color: #f7f7f7;
  background: #141414;
}

.content {
  .take_box {
    display: flex;
    flex-direction: column;
    margin: 0 20rpx;
    // border-radius: 5rpx;
    padding-top: 20rpx;
    margin-bottom: 200rpx;

    .goods_box {
      display: flex;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      flex-direction: column;
      background-size: 100% 100%;
      padding: 30rpx 0;
      color: white;

      .goods_level {
        color: #fff;
        font-size: 24rpx;
        padding: 10rpx 0;
        margin-top: 10rpx;
        border-top-right-radius: 20rpx;
        width: 100rpx;
        border-bottom-right-radius: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .goods_content {
        align-items: center;
        display: flex;
        height: 200rpx;

        .selected {
          width: 32rpx;
          height: 32rpx;
          /* margin: 0 20rpx; */
          margin-left: 40rpx;
        }

        .goods-image-bg {
          position: relative;
          background-size: 100% 100%;
          width: 200rpx;
          height: 200rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 20rpx;
          /* margin-right: 10rpx; */
        }

        .level-icon {
          width: 71rpx;
          height: 28rpx;
          line-height: 28rpx;
          position: absolute;
          background-size: 100% 100%;
          left: 10rpx;
          top: 10rpx;
          font-size: 17rpx;
          box-sizing: border-box;
          padding-left: 30rpx;
        }

        .goods_image {
          width: 170rpx;
          height: 170rpx;
        }

        .goods_info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          height: 170rpx;

          .goods_name {
            width: 350rpx;
            font-size: 30rpx;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .goods_price_box {
            display: flex;
            align-items: center;
            font-size: 24rpx;

            .goods_price_ext {
              background-color: rgba(255, 255, 255, 0.2);
              font-size: 22rpx;
              margin-left: 10rpx;
              padding: 0 10rpx;
              text-align: center;
              color: white;
              border-radius: 5rpx;
            }
          }

          .goods_recovery {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            justify-content: space-between;
            color: #ded000;

            .goods_price {
              display: flex;
              align-items: center;

              .gold {
                width: 30rpx;
                margin-left: 10rpx;
              }
            }

            .goods_num {
              color: white;
              font-size: 24rpx;
              margin-right: 40rpx;

              /*.number-box {
                transform: scale(0.7);
              }*/
            }
          }
        }
      }
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0rpx;
    left: 0;
    width: 100%;
    height: 120rpx;
    background-color: #141414;
    align-items: center;
    color: white;

    .bottom_select {
      display: flex;
      align-items: center;

      .bottom_select_icon {
        width: 32rpx;
        height: 32rpx;
        margin: 0 20rpx;
      }
    }

    .bottom_box {
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      font-weight: normal;
      margin-left: 70rpx;

      .bottom_text {
        display: flex;
        align-items: center;

        .bottom_text_num {
          margin: 0 10rpx;
          /* font-weight: bold; */
          font-size: 24rpx;
          color: #ded000;
        }
      }

      .bottom_title {
        display: flex;
        align-items: center;

        .total_recovery_price {
          /* font-weight: bold; */
          color: #ded000;
          font-size: 24rpx;
        }

        .gold {
          width: 30rpx;
          height: 30rpx;
          margin-left: 10rpx;
        }
      }
    }

    .exchange_btn {
      height: 84rpx;
      line-height: 84rpx;
      text-align: center;
      width: 228rpx;
      margin: 0 20rpx;
      border-radius: 5rpx;
      font-size: 28rpx;
      background-size: 100% 100%;
      background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary-small.png');
      filter: grayscale(1);

      &.exchange {
        filter: none;
        color: #fff;
      }
    }
  }
}
</style>